<template>
	<div class="admin-top-nav-com w-full h-[60px] shadow-lg flex justify-between items-center px-3">
		<div class="title">
			<nuxt-link to="/admin">
				<h1 class="text-blue-500 font-bold">后台管理</h1>
			</nuxt-link>
		</div>
		<div class="w-fit flex">
			<el-select v-model="value" placeholder="选择页面" :style="{ width: '100px' }">
				<nuxt-link v-for="item in pages" :to="item.value">
					<el-option :key="item.value" :label="item.label" :value="item.value" />
				</nuxt-link>
			</el-select>
			<el-button class="ml-2" type="danger" @click.stop="logout">退出登录</el-button>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'AdminTopNav',
	setup() {
		const route = useRoute();
		const router = useRouter();

		const value = ref<string>('/admin');

		const pages = [
			{
				label: '首页',
				value: '/admin',
			},
			{
				label: '文章管理',
				value: '/admin/article',
			},
			{
				label: '分类管理',
				value: '/admin/category',
			},
			{
				label: '站点管理',
				value: '/admin/site',
			},
			{
				label: '文件管理',
				value: '/admin/file',
			},
			{
				label: '图片管理',
				value: '/admin/images',
			},
			{
				label: '访问日志',
				value: '/admin/access',
			},
		];

		const logout = (): void => {
			// 删除 cookie
			document.cookie = '';
			router.replace('/admin/login');
			ElMessage.success('退出登录');
		};

		onBeforeMount(() => {
			value.value = route.path;
		});

		return {
			pages,
			value,
			logout,
		};
	},
});
</script>
